import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Modal, Button, Space, Table, TreeSelect, Switch, message, Image, Input, Tooltip} from 'antd';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable, {TableDropdown} from '@ant-design/pro-table';
import {PlusOutlined, EyeInvisibleOutlined, EyeTwoTone, InfoCircleOutlined, UserOutlined} from '@ant-design/icons';
import {getGoodsLists, setGoodsPutAway} from "@/services/ant-design-pro/goods";
import {history} from 'umi';

const {TextArea} = Input;

const onChange = e => {
  console.log(e);
};


const ExternalInterface = () => {
  //对话框
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //对话框结束

  const treeData = [
    {
      title: '开启',
      value: '0-0',
    },
    {
      title: '禁用',
      value: '0-1',
    },
  ];
  const [search, setSearch] = useState({status: 1, include: 'productattrvalue'})
  const actionRef = useRef<ActionType>();
  const columns: ProColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
      align: 'center',
      width: 100,
    },
    {
      title: '账号',
      dataIndex: 'product_name',
      search: false,
      align: 'center',
      width: 200,
    },
    {
      title: '描述',
      dataIndex: 'ms',
      search: false,
      align: 'center',
      width: 200,
    },
    {
      title: '添加时间',
      dataIndex: 'ot_price',
      search: false,
      align: 'center',
      width: 200,
    },
    {
      title: '最后登录时间',
      dataIndex: 'stock',
      search: false,
      align: 'center',
      width: 100,
    },
    {
      title: '登录',
      dataIndex: 'sort',
      search: false,
      align: 'center',
      width: 100,
    },
    {
      title: '搜索',
      dataIndex: 'search',
      search: true,
      hideInTable: true,
      renderFormItem: (_, {defaultRender}) => {
        return defaultRender(_);
      },
    },
    {
      title: '状态',
      dataIndex: 'category_id',
      hideInTable: true,
      search: true,
      width: 100,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        if (type === 'form') {
          return null;
        }
        const status = form.getFieldValue('state');
        if (status !== 'open') {
          return (
            <TreeSelect
              style={{width: '100%'}}
              treeData={treeData}
              dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
              placeholder="Please select"
              treeDefaultExpandAll
              {...fieldProps}
            />
          );
        }
        return defaultRender(_);
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      search: false,
      align: 'center',
      valueType: 'select',
      width: 100,
      render: (_, record) =>
        <Switch
          checkedChildren="上架"
          unCheckedChildren="下架"
          defaultChecked={record.status}
          onChange={async (state) => {
            console.log(state);
            setGoodsPutAway({
              ids: record.id,
              status: state ? 1 : 0,
            }).then(() => {
              message.success('操作成功！')
              actionRef.current.reload();
            })
          }
          }
        />
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => history.push('/manageGoods/editGoods/3433')}
        >
          编辑
        </a>,
        <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
          查看
        </a>,
        <TableDropdown
          key="actionGroup"
          onSelect={() => action?.reload()}
          menus={[
            {key: 'copy', name: '复制'},
            {key: 'delete', name: '删除'},
          ]}
        />,
      ],
    },
  ];
  return (
    <div>
      <PageContainer
        header={{
          title: '对外接口',
          breadcrumb: {},
        }}
        onTabChange={(key) => {
          switch (key) {
            case '1':
              setSearch({
                ...search, ...{
                  status: 1
                }
              })

              break;
            case '2':
              setSearch({
                ...search, ...{
                  status: 0
                }
              })
              break;
            case '3':
              setSearch({
                ...search, ...{
                  status: 3
                }
              })
              break;
            case '4':
              setSearch({
                ...search, ...{
                  status: 4
                }
              })
              break;

            case '5':
              setSearch({
                ...search, ...{
                  status: 5
                }
              })
              break;
          }
          actionRef.current.reload();

        }}
      >
        <ProTable
          columns={columns}
          request={async (params = {}, sort, filter) => {
            return getGoodsLists({...sort, ...filter, ...params, ...search});
          }}
          editable={{
            type: 'multiple',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          pagination={{
            pageSize: 10,
          }}
          dateFormatter="string"
          headerTitle={
            <div>

              <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={showModal}>
                添加账号
              </Button>
              <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Space direction="vertical">
                  账号：
                  <Input
                    size="large"
                    placeholder="请输入账号"
                    prefix={<UserOutlined className="site-form-item-icon"/>}

                  />
                  密码：
                  <Input.Password
                    size="large"
                    style={{width: 465}}
                    placeholder="请输入密码"
                    iconRender={visible => (visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/>)}
                  />
                  描述：
                  <TextArea maxLength={500} rows={4} showCount placeholder="请描述" allowClear onChange={onChange}/>
                </Space>
              </Modal>

            </div>

          }
          // toolBarRender={() => [
          //   <Button key="button" type="primary">
          //     商品采集
          //   </Button>
          // ]}
        />
      </PageContainer>
    </div>
  );
};

export default ExternalInterface;
